<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='FusionCharts.js'></script>
<script type="text/javascript">
	var items = new Array() ;
	var myChart ;
	$(document).ready(function(){
		updateRecord();
		try{
			initFlash() ;
		}catch(e){alert(e.message)}
	});
	function initFlash(){
		var chartConfigData = "<chart caption='动态更新图' \
			setAdaptiveYMin='1' xAxisName='时间' showRealTimeValue='1' \
			labelDisplay='Rotate' slantLabels='1' numDisplaySets='20'>\
				<categories>\
				</categories>\
				<dataset seriesName='保费收入' showValues='0'>\
				</dataset>\
				<styles>\
					<definition>\
						<style type='font' name='BigFont' size='14' />\
					</definition>\
					<application>\
						<apply toObject='Realtimevalue' styles='BigFont' />\
					</application>\
				</styles>\
			</chart>";
			FusionCharts.setCurrentRenderer('javascript') ;
		myChart = new FusionCharts( "RealTimeLineDY.swf", "myChartId", "600", "400", "0", "1" );                
		myChart.setXMLData(chartConfigData) ;                
		myChart.render("flashContainer");
	}
	function updateRecord(){
		try{
			var item = items.shift() ;
			if(item||item==0){
				//update table 
				var tmpObject = $("<div></div>") ;
				tmpObject.addClass("blueBorder") ;
				tmpObject.addClass("hide") ;
				tmpObject.addClass("record") ;
				tmpObject.addClass("cursor") ;
				tmpObject.text(item) ;
				$("#container").prepend(tmpObject) ;
				tmpObject.slideDown() ;
				
				//update flash 
				// format : &label={label}&value={val for series 1}|{val for series 2}
				try{
					var sender = FusionCharts("myChartId");
					var currDate = new Date();
					var label= currDate.getMinutes() + ":" + currDate.getSeconds();
					sender.feedData("&label="+label+ "&value=" + item) ;
				}catch(e){
					alert(e.message) ;
				}
			}
			
			setTimeout("updateRecord()",1500) ;
		}catch(e){alert(e.message)}
	}
	var j = 0 ;
	function updateItems(){
		/*
		* 这里模拟获得数据
		*/
		var c = $("#count").val() ;
		if(!isNaN(c)){
			c = c*1 ;
			$("#count").val(0) ;
		}
		for(var i = 0 ; i < c ; i ++)items.push(j+= Math.round(Math.random()*5)) ;
	}
</script>
<style type="text/css">
	.cursor{
		cursor: pointer;
	}
	.blueBorder{
		border: 1px solid #0000ff ;
	}
	.redBorder{
		border: 1px solid #666666 ;
	}
	.container{
		display: block ;
		overflow: hidden ;
		width:800px;
		height:500px ;
		margin: 0 auto ;
		float: left ;
	}
	.record{
		display:block ;
		width:600px;
		margin: 0 auto ;
	}
	.hide{
		display:none ;
	}
</style> 
</head>
<body>
	<p>
		加入<input id='count' />条记录
		<button onclick="javascript:updateItems()">加入</button>
		<p>
			这里是你填写好要刷新几条记录，点击加入，然后系统会自动挨个刷新几条记录，刷新的数字都是随机生成的，第三幅图是这个类库的另外一个样式，只做了图片。明天9点前不许打电话
		</p>
	</p>
	<div id=container class='container redBorder'>
	</div>
	<div id=flashContainer class='container redBorder'>
	</div>
	<div class='container redBorder' style='background-image: url(另一种样式.jpg);background-repeat: no-repeat;'>
	</div>
	<div class='container redBorder'>
		<p>
			<b>
			flash设置：由于这个是纯网页的演示，所以需要设置FLASH
			控制面板→flash player→受信任位置设置→添加HTML以及其他文件所在的文件夹
			不然有可能无法正常演示
			</b>
		</p>
	</div>
</body>
</html>